<template>
  <div class="tab-bar-container">
    <div class="tab-bar">
      <a
        href="#"
        v-for="(item, index) in tabs"
        :key="index"
        class="tab-bar_item"
        @click.prevent="handleTabClick(index)"
        ref="tabItemsRef"
        :style="{ color: activeIndex === index ? item.color : '#666' }"
      >
        <div class="icon-alt">
          <i :class="item.icon"/>
          <span>{{ item.alt }}</span>
        </div>
      </a>
      <div
        class="tab-bar_line-indicator"
        :style="{
          top: indicatorPosition,
          backgroundColor: currentColor
        }"
        :class="{ animate: isAnimating }"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LeftBar',
  props: {
    activeIndex: {
      type: Number,
      default: 0
    },
    tabs: {
      type: Array,
      required: true,
      default: () => [
        { icon: 'fa-solid fa-house', alt: '首页', color: '#ae5ef2' },
        { icon: 'fa-solid fa-plus', alt: '添加', color: '#2f8fcf' },
        { icon: 'fa-solid fa-bag-shopping', alt: '购物袋', color: '#2fcf51' },
        { icon: 'fa-solid fa-bell', alt: '通知', color: '#f2e75e' },
        { icon: 'fa-solid fa-cog', alt: '设置', color: '#e95181' }
      ]
    }
  },
  data() {
    return {
      indicatorPosition: '0px',
      currentColor: this.tabs[0]?.color || '#ae5ef2',
      isAnimating: false
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.setIndicatorPosition(this.activeIndex)
    })
  },
  methods: {
    handleTabClick(index) {
      this.activeIndex = index
      this.currentColor = this.tabs[index].color || '#ae5ef2'
      this.setIndicatorPosition(index)

      // 触发父组件事件
      this.$emit('tab-click', {
        index,
        tab: this.tabs[index]
      })
    },
    setIndicatorPosition(index) {
      const tabEl = this.$refs.tabItemsRef[index]
      const indicatorEl = this.$el.querySelector('.tab-bar_line-indicator')
      if (tabEl && indicatorEl) {
        this.indicatorPosition = tabEl.offsetTop + 'px'
        indicatorEl.style.height = tabEl.clientHeight + 'px'
      }

      this.isAnimating = false
      this.$nextTick(() => {
        void indicatorEl.offsetWidth
        this.isAnimating = true
      })
    }
  }
}
</script>

<style scoped>
.tab-bar-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--theme-1);
  transition: background-color 1s;
}

.tab-bar {
  background-color: white;
  display: flex;
  flex-direction: column;
  padding: 2vh 10px;
  border-radius: 15px;
  position: relative;
  gap: 2vh;
  box-shadow: 0 10px 40px -20px #000000;
  width: auto;
  white-space: nowrap;
}

.tab-bar_line-indicator {
  position: absolute;
  width: 10px;
  height: calc(4vh + 1em);
  left: 2px;
  background-color: #ae5ef2;
  transition: top 0.3s cubic-bezier(.25, .25, .25, 1.50),
  background-color 0.3s ease;
}

.tab-bar_line-indicator.animate {
  animation: circleIndicatorAnimate 0.6s both;
}

@keyframes circleIndicatorAnimate {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

.tab-bar_item {
  padding: 1vh 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  text-decoration: none;
  color: #666;
  transition: color 0.3s ease, background-color 0.2s ease;
}

.tab-bar_item:hover {
  background-color: #f5f5f5;
}

.icon-alt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
}

.icon-alt i {
  font-size: clamp(16px, 2vw, 24px);
}

.icon-alt span {
  font-size: clamp(10px, 1.5vw, 12px);
  color: inherit;
  white-space: nowrap;
}
</style>
